<template>
  <div>
    <Appheader :parentToChild="ymname"></Appheader>
    <div class="content" v-loading="loading">
      <div class="gaoxiao1">
        <div class="detail_line flex">
          <!-- <p class="line"></p> -->
          学校信息
        </div>
        <div class="detail_school flex">
          <img :src="info.photo" alt />
          <div class="detail_s_c">
            <p>{{info.name}}</p>
            <div class="s_c_d hidden3" v-html="info.details"></div>
            <div class="see_more_s_c" @click="see_more()">查看更多</div>
            <div class="s_c_dt">
              地址：{{info.addr}}
              <span @click="see_ditu()">查看地图</span>
            </div>
            <div class="s_c_dz">电话：{{info.phone}}</div>
            <div class="s_c_wz">
              学校网址：
              <a :href="info.website">{{info.website}}</a>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="gaoxiao2">
        <div class="detail_line flex">
          <p class="line"></p>2019年招生专业详情
        </div>
        <ul class="s_zhuanye flex">
          <li
            v-for="(azylist,zyindex) in info.ykSchoolProfessionals"
            :key="zyindex"
            :class="zyfl_name==azylist.professional?'s_zhuanye_li':''"
            @mouseover="mouseOver(azylist.professional,azylist.ykSchoolProfessionalxiashus)"
          >{{azylist.professional}}</li>
        </ul>
        <ul class="li_content">
          <li class="flex" v-for="(c_list,c_index) in c_zyfl" :key="c_index">
            <span class="cycle"></span>
            {{c_list.professional}}
          </li>
        </ul>
      </div> -->
      <div class="gaoxiao3">
        <div class="detail_line flex">
          <!-- <p class="line"></p> -->
          学校概况
        </div>
        <div class="gaoxiao3_a">
          <p>院校类型：{{info.type}}</p>
          <p>院校性质：{{info.nature}}</p>
          <p>录取批次：{{info.batch}}</p>
          <!-- <p>招收人数：{{info.peoplenum}}人</p> -->
        </div>
      </div>
      <!-- <div class="gaoxiao4">
        <div class="detail_line flex">
          <p class="line"></p>最新消息
        </div>
        <ul class="gaoxiao4_ul">
          <li class="gaoxiao4_li flex" v-for="(list,index) in news" :key="index">
            <div class="gx4_li_div flex">
              <span class="cycle"></span>{{list.title}}
            </div>
            <p class="gx4_li_p">{{list.createTime}}</p>
          </li>
        </ul>
      </div> -->
      <div class="gaoxiao4">
        <div class="detail_line flex">
          <!-- <p class="line"></p> -->
          历年参考分数线
        </div>
        <ul class="gaoxiao4_ul">
          <li class="gaoxiao4_li flex" v-for="(list,index) in fsx" :key="index" @click="tolist_detail(list.id)">
            <div class="gx4_li_div flex">
              <span class="cycle"></span>{{list.title}}
            </div>
            <p class="gx4_li_p">{{list.createTime}}</p>
          </li>
        </ul>
      </div>
      <div class="gaoxiao4">
        <div class="detail_line flex">
          <!-- <p class="line"></p> -->
          历年招生简章
        </div>
        <ul class="gaoxiao4_ul">
          <li class="gaoxiao4_li flex" v-for="(list,index) in jz" :key="index" @click="tolist_detail(list.id)">
            <div class="gx4_li_div flex">
              <span class="cycle"></span>{{list.title}}
            </div>
            <p class="gx4_li_p">{{list.createTime}}</p>
          </li>
        </ul>
      </div>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import Appheader from "../header";
import Appfooter from "../footer";
import address from "../../../static/address";
import { ykSchoolinfo, ykSchoolNewlist } from "../../api/index";
export default {
  props: {},
  data() {
    return {
      ymname:'高校招生简章',
      loading: true,
      id: "",
      info: {},
      zyfl_name: "",
      c_zyfl: [],
      news: [], //最新消息
      fsx: [], //历年分数线
      jz: [] //简章
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.id = this.$route.params.id || sessionStorage.getItem("school_id");
    sessionStorage.setItem("school_id", this.id);
    this.post();
    this.post2();
  },
  watch: {},
  methods: {
    post() {
      this.loading = false;
      let msg = {
        id: this.id
      };
      ykSchoolinfo(this.qs(msg))
        .then(res => {
          res.data.ykSchool.details=res.data.ykSchool.details.slice(0,260);
          this.info = res.data.ykSchool;
          this.zyfl_name =
            res.data.ykSchool.ykSchoolProfessionals[0].professional;
          this.c_zyfl =
            res.data.ykSchool.ykSchoolProfessionals[0].ykSchoolProfessionalxiashus;
        })
        .catch(e => {});
    },
    post2() {
      let msg = {
        sId: this.id,
        type: "最新消息"
      };
      ykSchoolNewlist(this.qs(msg))
        .then(res => {
          if (res.data.code == 0 && res.data.YkSchoolNews.length != 0) {
            for (let i = 0; i < res.data.YkSchoolNews.length; i++) {
              res.data.YkSchoolNews[i].createTime = res.data.YkSchoolNews[i].createTime.split(" ")[0];
            }
          }
          this.news = res.data.YkSchoolNews;
        })
        .catch(e => {});
      let msg2 = {
        sId: this.id,
        type: "历年参考分数线"
      };
      ykSchoolNewlist(this.qs(msg2))
        .then(res => {
          console.log(res)
          if (res.data.code == 0 && res.data.YkSchoolNews.length != 0) {
            for (let i = 0; i < res.data.YkSchoolNews.length; i++) {
              res.data.YkSchoolNews[i].createTime = res.data.YkSchoolNews[i].createTime.split(" ")[0];
            }
          }
          this.fsx = res.data.YkSchoolNews;
        })
        .catch(e => {});
      let msg3 = {
        sId: this.id,
        type: "历年招生简章"
      };
      ykSchoolNewlist(this.qs(msg3))
        .then(res => {
          if (res.data.code == 0 && res.data.YkSchoolNews.length != 0) {
            for (let i = 0; i < res.data.YkSchoolNews.length; i++) {
              res.data.YkSchoolNews[i].createTime = res.data.YkSchoolNews[i].createTime.split(" ")[0];
            }
          }
          this.jz = res.data.YkSchoolNews;
        })
        .catch(e => {});
    },
    mouseOver(name, item) {
      this.zyfl_name = name;
      this.c_zyfl = item;
    },
    see_more(){
      this.$router.push({
        name:'gaoxiaoMdetail',
        params:{
          id:this.id
        }
      })
    },
    see_ditu(){
      this.$router.push({
        name:'gaoxiaoditu',
        params:{
          id:this.id
        }
      })
    },
    tolist_detail(id){
      this.$router.push({
        name:'gaoxiaoList_detail',
        params:{
          id:id
        }
      })
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
.content {
  width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
}
.detail_line {
  font-size: 24px;
  color: #c8a94f;
}
.line {
  margin-left: 19px;
  width: 4px;
  height: 23px;
  background: rgba(216, 20, 23, 1);
  margin-right: 6px;
}
.detail_school {
  margin-top: 35px;
}
.detail_school > img {
  width: 200px;
  height: 200px;
  margin-right: 25px;
}
.detail_s_c > p:nth-child(1) {
  font-size: 24px;
  color: #fff;
}
.detail_s_c > div {
  font-size: 14px;
  color: #acaebb;
  line-height: 27px;
}
.s_c_d {
  width: 934px;
  margin-top: 5px;
}
.s_c_wz > a {
  text-decoration: none;
  color: #c8a94f;
}
.see_more_s_c,
.s_c_dt > span {
  color: #c8a94f !important;
  cursor: pointer;
}
.s_c_dt > span {
  margin-left: 21px;
}
.gaoxiao2 {
  margin-top: 25px;
}
.s_zhuanye {
  margin-top: 20px;
}
.s_zhuanye > li {
  width: 100px;
  padding-bottom: 10px;
  border-bottom: 4px solid #fff;
  font-size: 14px;
  color: #333;
  text-align: center;
  cursor: pointer;
}
.s_zhuanye_li,
.s_zhuanye > li:hover {
  border-bottom: 4px solid #d81417 !important;
  color: #d81417 !important;
}
.li_content {
  padding-bottom: 29px;
  width: 1171px;
  background: #f9fafc;
  padding-top: 1px;
}
.li_content > li {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin-top: 15px;
  cursor: pointer;
}
.cycle {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #cdcbcb;
  border-radius: 50%;
  margin-left: 14px;
  margin-right: 6px;
}
.li_content > li:hover {
  color: #d81417;
}
.li_content > li:hover > .cycle {
  background: #d81417;
}
/* gaoxaio3 */
.gaoxiao3_a {
  margin-left: 20px;
  margin-top: 17px;
}
.gaoxiao3_a > p {
  font-size: 14px;
  color: #acaebb;
  margin-bottom: 7px;
}
.gaoxiao4 {
  margin-top: 28px;
}
.gaoxiao4_li {
  height: 60px;
  justify-content: space-between;
  padding-right: 9px;
  border-bottom: 1px dashed #dddddd;
  cursor: pointer;
}
.gaoxiao4_li:last-child {
  border-bottom: none;
}
.gx4_li_div,
.gx4_li_p {
  font-size: 14px;
  color: #acaebb;
}
.gaoxiao4_li:hover > .gx4_li_div {
  color: #c8a94f;
}
.gaoxiao4_li:hover .gx4_li_p {
  color: #c8a94f;
}
.gaoxiao4_li:hover .cycle {
  background: #c8a94f;
}
</style>
